<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <th:block th:replace="~{layouts/common::layui}"></th:block>
    <th:block th:replace="~{layouts/common::vue}"></th:block>
    <th:block th:replace="~{layouts/common::element}"></th:block>
    <th:block th:replace="~{layouts/common::element-icon}"></th:block>
    <script th:src="@{/js/base-table.js}"></script>
    <style>
        #app {margin: 0}
        .layout-container-demo .el-header {
            position: relative;
            background-color: #fff;
            color: var(--el-text-color-primary);
            border-bottom: 1px solid var(--el-border-color-light);
        }
        .layout-container-demo .el-aside {
            color: var(--el-text-color-primary);
            background: var(--el-color-primary-light-8);
        }
        /*.layout-container-demo .el-menu {*/
        /*    border-right: none;*/
        /*    max-width: 200px;*/
        /*}*/
        .layout-container-demo .el-main {
            padding: 0;
        }
        .layout-container-demo .toolbar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            right: 20px;
        }
        .logo{
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            height: 60px;
            background-color: #545c64;
            text-align: center;
            line-height: 60px;
        }
        .main-menu{
            height: calc(100vh);
        }
        .main-menu:not(.el-menu--collapse){
            width: 200px;
        }
        iframe{
            width: 100%;
            height: calc(100vh - 92px);
        }
        .el-aside{
            width: auto;
        }
        .toolbar-s .el-icon{
            font-size: 20px;
            cursor: pointer;
        }
        .toolbar-s .refresh{
            margin-left: 10px;
        }
        .toolbar-s .el-icon:hover{
            opacity: 0.5;
        }
        .el-header{
            height: 50px;
        }
        .el-tabs__item,.el-tabs__item:nth-child(2){
            padding: 0 10px !important;
        }
        .el-tabs__header {
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container class="layout-container-demo" style="height: calc(100vh)">
        <el-aside>
            <el-scrollbar>
                <el-menu active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" class="main-menu" :collapse="menuControllerIcon=='Fold'">
                    <el-menu-item class="logo" index="logo">
                        <text v-if="menuControllerIcon === 'Fold'">AD</text>
                        <span v-else style="display: inline-block;text-align: center;width: 100%">AGLOGO</span>
                    </el-menu-item>
                    <template v-for="menu in menuData" >
                        <el-sub-menu v-if="menu.children?.length > 0" :index="menu.id + 'A'">
                            <template #title>
                                <el-icon v-if="menu.icon"><component :is="menu.icon"></component></el-icon>
                                <span>{{ menu.title }}</span>
                            </template>
                            <el-menu-item @click="addTab(childrenMenu)"  v-for="childrenMenu in menu.children" :index="childrenMenu.id + 'A'">
                                <template #title>
                                    <el-icon v-if="childrenMenu.icon"><component :is="childrenMenu.icon"></component></el-icon>
                                    <span>{{ childrenMenu.title }}</span>
                                </template>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item v-else  @click="addTab(menu)"  :index="menu.id + 'A'">
                            <el-icon v-if="menu.icon"><component :is="menu.icon"></component></el-icon>
                            <span>{{ menu.title }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        <el-container>
            <el-header style="display: flex;justify-content: space-between; font-size: 12px">
                <div class="toolbar toolbar-s">
                    <el-icon @click="menuControllerIcon = menuControllerIcon === 'Fold' ? 'Expand' : 'Fold'"><component :is="menuControllerIcon"></component></el-icon>
                    <el-icon class="refresh" @click="refresh()"><component :is="refreshIcon"></component></el-icon>
                </div>
                <div class="toolbar">
                    <el-dropdown>
                        <el-icon style="margin-right: 8px; margin-top: 1px">
                            <setting />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>View</el-dropdown-item>
                                <el-dropdown-item>Add</el-dropdown-item>
                                <el-dropdown-item>Delete</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>Tom</span>
                </div>
            </el-header>

            <el-main>
                <el-tabs
                        v-model="tab"
                        class="demo-tabs"
                        @tab-remove="removeTab"
                        @tab-change="tabChange"
                >
                    <el-tab-pane
                            v-for="item in tabs"
                            :closable="item.closable"
                            :key="item.id"
                            :name="item.id"
                    >
                        <template #label>
                            <el-icon v-if="item.icon"><component :is="item.icon"></component></el-icon>
                            {{ item.title }}
                        </template>
                        <iframe :src="item.route" frameborder="0"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>

</script>
<script>
    let { ref, createApp, reactive } = Vue;

    const app = createApp({
        setup(){
            let mainRoute = reactive({});
            const menuControllerIcon = ref('Fold');
            const refreshIcon = ref('RefreshRight');
            const tab = ref('1');
            let tabs = ref([
                {
                    id: '1',
                    title: '首页',
                    content: '首页111',
                    icon: 'HomeFilled',
                    route: '/admin-base/system/make-curd',
                    closable: false
                }
            ]);
            mainRoute = tabs.value[0];

            const menuData = ref([]);
            layui.jquery.ajax({
                url: '/admin-base/get-menu',
                type: 'get',
                success: function (res) {
                    menuData.value = res.data;
                }
            });
            return {
                mainRoute,
                menuData,
                refreshIcon,
                menuControllerIcon,
                tab,
                tabs,
                refresh(){
                    // 图标换成关闭
                    refreshIcon.value = 'Close';
                    console.log(mainRoute.route)
                    // 考虑下地址已有query参数,以及已有时间戳参数
                    if(mainRoute.route.indexOf('?') > -1 && mainRoute.route.indexOf('t=') > -1){
                        mainRoute.route = mainRoute.route.replace(/t=\d+/, 't=' + new Date().getTime());
                    } else if(mainRoute.route.indexOf('?') > -1){
                        mainRoute.route = mainRoute.route + '&t=' + new Date().getTime();
                    } else{
                        mainRoute.route = mainRoute.route + '?t=' + new Date().getTime();
                    }
                    // iframe加载完毕后，图标换回来
                    layui.jquery('iframe').on('load', function () {
                        refreshIcon.value = 'RefreshRight';
                    });
                },
                removeTab (targetName) {
                    const tabsA = tabs.value
                    let activeName = tab.value
                    if (activeName === targetName) {
                        tabsA.forEach((tab, index) => {
                            if (tab.id === targetName) {
                                const nextTab = tabsA[index + 1] || tabsA[index - 1]
                                if (nextTab) {
                                    activeName = nextTab.id
                                }
                            }
                        })
                    }

                    tab.value = activeName
                    tabs.value = tabsA.filter((tab) => tab.id !== targetName);
                },
                addTab(addTab){
                    addTab.closable = true;
                    tabs.value.push(addTab);
                    tab.value = addTab.id;
                    mainRoute = addTab;
                },
                tabChange(name){
                    mainRoute = tabs.value.filter((tab) => tab.id === name)[0]
                }
            };
        }
    })
    app.use(ElementPlus)
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    app.mount('#app')
</script>
</body>
</html>